<template>
    <div class="test-index-container" ref="containerRef">
        <HorizontalLayout>
            <template #left>
                <div class="left" ref="leftNavRef">
                    <VerticalLayout>
                        <template #top>
                            <h2>Test Navigation</h2>
                            <ul>
                                <li
                                style="cursor: pointer;" 
                                v-for="(category,index) in testCategoriesRef" :key="index"
                                @click="handleCilck(category)"
                                :class="{isSelected:category.isSelected}"
                                >
                                <a>{{ category.name }}</a>
                                </li>
                                <!-- <li @click="handleCilck(cat)">Components Test</li>
                                <li>Views Test</li> -->
                            </ul>
                        </template>
                        <template #default>
                            <div class="nav">
                                <ul>
                                    <li 
                                    v-for='(routeItem) in currentCategoryRouteCom'
                                    :key="routeItem.name">
                                        <RouterLink
                                            :to="{
                                                name: routeItem.name,
                                            }"
                                            active-class="active-class"
                                            >
                                            {{routeItem.name}}
                                        </RouterLink>
                                    </li>
                                </ul>
                                <!-- <RouterLink
                                    :to="{
                                        name: 'horizontal_layout_index_test',
                                    }"
                                >
                                    Components Test
                                </RouterLink> -->
                            </div>
                        </template>
                    </VerticalLayout>
                </div>
            </template>
            <template #default>
                <div class="main" ref="mainRef">
                    <RouterView></RouterView>
                </div>
            </template>
        </HorizontalLayout>
    </div>
</template>
<script setup lang="ts">
import HorizontalLayout from "@/components/horizontal_layout/horizontal_layout_index.vue";
import VerticalLayout from "@/components/vertical_layout/vertical_layout_index.vue";

import { computed, onMounted, onUpdated, ref } from "vue";
import { RouteRecordRaw } from "vue-router";
import { componentTestRoutes } from "@/routes/test/components_test_routes";
import { combineComponentTestRoutes } from "@/routes/test/combine_components_test_routes";
import { useRouter } from "vue-router";
////#region defineXxx
//defineOptions({
//name:
//});

//const props=defineProps({
//propA:{
//type:String,
//required:true
//},
//propB:{
//type:Number,
//default:1
//},
//propC:{
//type:String as PropType<MyType>,
//required:true
//},
//});

//const emit = defineEmits<{
//event1:[para1:number,para2:string],
//event2:[para1:number,para2:string],
//}>();
////#endregion

type TypeCategory={
    name:string,
    isSelected:boolean,
    routeRecords:RouteRecordRaw[]
}


const testCategoriesRef=ref<TypeCategory[]>([]);


testCategoriesRef.value.push({
    name:'componentTest',
    isSelected:true,
    routeRecords:componentTestRoutes
});
testCategoriesRef.value.push({
    name:'combineComponentTest',
    isSelected:false,
    routeRecords:combineComponentTestRoutes
});


testCategoriesRef.value[0].isSelected=true;

const currentCategoryRouteCom=computed(()=>{
    return testCategoriesRef.value.find(e=>e.isSelected)?.routeRecords;
})

console.log('currentCategoryRouteCom',currentCategoryRouteCom);

const router=useRouter()
const handleCilck = (category:TypeCategory) => {
    testCategoriesRef.value.forEach(e=>{
        if(e===category){
            e.isSelected=true;
            console.log('e.routeRecords[0].path',e.routeRecords[0].path);
            console.log('router',router);
            router.push({
                path:e.routeRecords[0].path
            })
            
        }else{
            e.isSelected=false;
        }
    })
};







const leftWidthRef=ref(300);
//const ClientWidthRef=ref(document.documentElement.clientWidth);
const leftNavRef=ref<HTMLDivElement>();
const mainRef=ref<HTMLDivElement>();
const containerRef=ref<HTMLDivElement>();

onMounted(()=>{
    setSize();
    window.addEventListener('resize',setSize);
    
});

onUpdated(()=>{
    setSize();//main出现滚动条后，会影响宽度，增加后，不会出现水平滚动条
})


function setSize(){
    leftNavRef.value!.style.width=leftWidthRef.value+'px';
    mainRef.value!.style.width=(containerRef.value!.offsetWidth-leftWidthRef.value)+'px';
    mainRef.value!.style.left=leftWidthRef.value+'px';
}

</script>

<style lang="less" scoped>
a {
  font-weight: 500;
//   color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

.isSelected{
    color:#535bf2
}

.left{
    position: fixed;
    background-color: gray;
    background-color: var(--el-bg-color-overlay);
}
.nav {
    margin-top: 20px;
    width: 100%;
    height: 100%;
    border: 1px solid red;
}
.main{
    position: absolute;
}

.active-class{
    color:red;
}
</style>
